<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<form>
	cname:<input type="text" name="cname"/><br/><br/>
	sal:<input type="number" name="sal"/><br/><br/>
	brith:<input type="date" name="birth"/><br/><br/>
	<input type="radio" name="sex" value="true" checked="checked"/>男
	<input type="radio" name="sex" value="false"/>女<br/><br/>
	<button>add</button>
</form>
<hr>
<table id="customers" class="table-bordered" style="width:700px"></table>
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">Detail Page</h4>
	      </div>
	      <div class="modal-body">
	        <table class="table" id="updateCus">
	            <tr>
	                <td>ID：</td>
	                <td><input type="text" name="id"disabled="disabled"/></td>
	            </tr>
	            <tr>
	                <td>Name：</td>
	                <td><input type="text" name="name"/></td>
	            </tr>
	            <tr>
	                <td>Sex：</td>
	                <td>
						<input type="radio" name="sex" value="true"/>male&nbsp;&nbsp;&nbsp;
						<input type="radio" name="sex" value="false"/>female
					</td>
	            </tr>
	            <tr>
	                <td>Salary：</td>
	                <td><input type="number" name="salary"/></td>
	            </tr>
	            <tr>
	                <td>BirthDate：</td>
	                <td>
	                	<input type="date" name="birth"/>
	                </td>
	            </tr>
	        </table>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary" id="update">update</button>
	      </div>
	    </div>
	  </div>
	</div>

<script type="text/javascript">
(function(){
	var obj={};
	obj.ajax=function(type,url,data,headers,context,callback){
		$.ajax({type:type,url:url,data:JSON.stringify(data),headers:headers,context:context})
		.done(callback);
	};
	window.j=obj;
})();

function CustomersComponent(template){
	this.model=null;
	this.template=template;
	this.addCustomer=function(customer){
		j.ajax("POST","addCustomer",customer,{"Content-Type":"application/json"},this,function(customer){
			this.model.push(customer);
			_render(this.model);
		});
	};
	this.updateCustomer=function(customer){
		
	};
	this.findAllCustomers=function(){
		j.ajax("GET","findAllCustomers",null,null,this,function(customers){
			this.model=customers;
			_render(this.model);
		});
		
	};
	this.updateCustomer=function(customer){
    	ap.sendPut("updateCustomer",customer,function(data){
    		if(data){
    			var cindex=-1;
        		this.customers.forEach(function(item,index){
        			if(item.id==data.id){
        				cindex=index;
        			}
        		});
        		this.customers.splice(cindex,1,data);
        		alert("update success");
        		_render(this.customers);
    		}else {
    			alert("update fail");
    		}
    		$("#updateModal").modal('hide');
    	});
    }
   
	function _render(data){
		template.empty();
		data.forEach(function(item){
			$("<tr/>").append($("<td/>").text(item.id))
			.append($("<td/>").text(item.cname))
			.append($("<td/>").text(item.sal))
			.append($("<td/>").text(item.sex))
			.append($("<td/>").text(item.birth))
			.append($("<td/>").append($("<button/>").text("del").addClass("btn btn-success").data(item)))
			.append($("<td/>").append($("<button/>").text("update").addClass("btn btn-info").data(item)))
			.appendTo(template);
		});
		$("button:contains(del)").on("click",function(){
			$this=$(this);
			j.ajax("DELETE","deleteCustomer?id="+$this.data().id,null,null,this,function(m){
				model=data.filter(function(item){
					return item.id!=$this.data().id;
				});
				_render(model);
			});
		});
	}
}
function _bindUpdateEvent(){
    	$("button.update").on("click",function(e){
    		var data = $(this).data();
    		$("#updateModal input[name='id']").val(data.id);
        	$("#updateModal input[name='name']").val(data.name);
        	$("#updateModal input[name='salary']").val(data.salary);
            if(data.sex){
                $("#updateModal input[name='sex']").last().attr("checked",false);
                $("#updateModal input[name='sex']").first().attr("checked",true);
            }else {
                $("#updateModal input[name='sex']").first().attr("checked",false);
                $("#updateModal input[name='sex']").last().attr("checked",true);
            }
        	$("#updateModal input[name='birth']").val(_formatDate(new Date(data.birth)));
        });
    }
$(function(){
	var c=new CustomersComponent($("#customers"));
	c.findAllCustomers();
	$("button","form").on("click",function(e){
		var cname=$("input[name=cname]").val();
		var sal=$("input[name=sal]").val();
		var birth=$("input[name=birth]").val();
		var sex=$("input[name=sex]:checked").val();
		var c1={cname:cname,sex:sex,birth:birth,sal:sal};
		c.addCustomer(c1);
		e.preventDefault();
	})
})
</script>
</body>
</html>